<template>
  <view class="page-content">
    <view class="order-detail-main">
      <view class="order-detail-item">
        <view class="order-detail-item-head">
          <view class="order-detail-item-content">
            <text class="order-detail-item-content-title">订单号</text>
            <text class="order-detail-item-content-text">{{
              orderInfo.orderNum
            }}</text>
          </view>
          <text class="order-detail-item-content-title-status">{{
            orderStatusMp(orderInfo.status)
          }}</text>
        </view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">类型</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.goodsName
          }}</text>
        </view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">金额</text>
          <text
            class="order-detail-item-content-text order-detail-item-content-amount"
            >￥{{ orderInfo.totalPrice }}</text
          >
        </view>
        <view class="order-detail-item-content">
          <text
            class="order-detail-item-content-title order-detail-item-content-timer"
            >下单时间</text
          >
          <text
            class="order-detail-item-content-text order-detail-item-content-timer"
            >{{ orderInfo.createTime }}</text
          >
        </view>
        <!-- <view class="order-detail-item-content">
          <view class="order-detail-item-content-code"
            ><up-qrcode :size="200" val="uview-plus"></up-qrcode
          ></view>
          <view class="order-detail-item-content-code-text">未使用</view>
        </view> -->
      </view>
      <view class="order-detail-item">
        <view class="order-detail-item-title">服务周期</view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">服务时长</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.serviceDay
          }}天</text>
        </view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">开始时间</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.startTime
          }}</text>
        </view>
      </view>
      <view class="order-detail-item">
        <view class="order-detail-item-title">被护理人信息</view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">姓名</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.beNurseInfo.name
          }}</text>
        </view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">服务地址</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.addressInfo.detailAddress
          }}</text>
        </view>
        <view class="order-detail-item-content">
          <text class="order-detail-item-content-title">其他信息</text>
          <text class="order-detail-item-content-text">{{
            orderInfo.remark
          }}</text>
        </view>
      </view>
      <view class="order-detail-item">
        <view class="order-detail-item-title">护工信息</view>
        <up-empty mode="order" icon="file-text" text="暂无护工信息" v-if="!orderInfo.nurseInfo"> </up-empty>
        <MakeList v-else :listData="[orderInfo.nurseInfo]"/>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";
import MakeList from "../../../components/make/index.vue";
import { GetOrderInfo } from "@/api/my.js";
import { orderStatusMp } from "@/utils/common";

let isCurrent = ref(1);

const props = defineProps({
  id: String,
});

let orderInfo = ref({});

const GetOrderInfoDetail = async () => {
  try {
    let params = {
      id: props.id,
    };
    uni.showLoading({
      title: "加载中",
    });
    let data = await GetOrderInfo(params);
    orderInfo.value = data.data;
    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
  }
};

onMounted(() => {
  GetOrderInfoDetail();
});
</script>

<style scoped lang="scss">
.page-content {
  min-height: 100vh;
  background: #f2f2f2;
  box-sizing: border-box;
  padding-bottom: 60rpx;
}

.order-detail-main {
  padding-top: 20rpx;
}

.order-detail-item {
  padding: 30rpx;
  margin: 0 20rpx 20rpx 20rpx;
  border-radius: 16rpx;
  background: #fff;
  .order-detail-item-content-amount {
    color: red;
  }
  .order-detail-item-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .order-detail-item-content {
      margin-top: 0;
    }
    .order-detail-item-content-title-status {
      color: #1dcb91;
    }
  }
  .order-detail-item-title {
    font-size: 32rpx;
    color: "#1dcb91";
    font-weight: bold;
    color: #1dcb91;
  }
  .order-detail-item-content {
    margin-top: 20rpx;
    .order-detail-item-content-title {
      margin-right: 10rpx;
      color: #999;
    }
  }
  .order-detail-item-content-timer {
    color: #999;
  }
}
.order-detail-item-content-code {
  display: flex;
  justify-content: center;
  margin: 30rpx 0;
}
.order-detail-item-content-code-text {
  text-align: center;
}
::v-deep .make-item{
  padding:20rpx 0!important;
}
</style>
